<template>
    
    <el-row class="tac">
        <el-col :span="24">
            <el-menu
                active-text-color="#f93684"
                background-color="#fff"
                class="el-menu-vertical-demo"
                default-active="1-1"
                text-color="#000"
                style="margin-bottom: 30px"
            >
                <el-sub-menu index="1">
                    <template #title>
                        <span class="navigation-item-content item">练习室</span>
                    </template>
                    <el-menu-item index="1-1 " class="navigation-item-content item">我的练习室</el-menu-item>
                </el-sub-menu>
            </el-menu>
            <el-menu
                active-text-color="#f93684"
                background-color="#fff"
                class="el-menu-vertical-demo"
                default-active="1-1"
                text-color="#000"
            >
                <router-link to="/training/mediaCache">
                    <el-menu-item index="2" class="navigation-item-content item"><span>缓存</span>
                    </el-menu-item>
                </router-link>
                <el-menu-item @click="logApp">
                    <span style="color: #111!important;" class="navigation-item-content item">音视频播放器</span>
                </el-menu-item>
                <router-link to="/training/collections">
                    <el-menu-item index="4" class="navigation-item-content item">
                        <span>收藏</span>
                    </el-menu-item>
                </router-link>
                <router-link to="/training/view_records">
                    <el-menu-item index="5" class="navigation-item-content item">
                        <span>历史</span>
                    </el-menu-item>
                </router-link>
            
            </el-menu>
        </el-col>
    </el-row>
    <el-dialog
        v-model="dialogVisible"
        width="15%"
    >
        <span>请打开中舞网APP，点击“练习室”-“音频库”中查看</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
                   style="background-color: #f93684"
        >确定</el-button
        >
      </span>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>

import {ref} from "vue";

const dialogVisible = ref(false)

const logApp = () => {
    dialogVisible.value = true
}
</script>
<style lang="less">

.item:hover {
    
    // box-sizing:content-box;
    border-left: 4px solid #f93684;
    
}

.navigation-item {
    
    .navigation-item-content {
        font-size: 14px;
        color: #111;
        padding: 17px 21px;
        cursor: pointer;
        position: relative;
        display: block;
        text-decoration: none;
    }
}

</style>
